
<template>
  <div style="position: relative;">
    <el-input ref="hideinput" v-model="txtstr" placeholder="|"><i slot="suffix"
        class="el-input__icon el-icon-circle-close" @click="iconclick"></i></el-input>
    <input ref="refbottleno" name="bottlenoname" class="pwdcls" type="password" v-model="txtstr" @keyup.enter="acceptCode"
      autocomplete="off">
  </div>
</template>

<script>
export default {
  name: "rm_barcodeinput",
  props: {
    bottleno: {
      type: String,
      default: "",
      require: true
    }
  },
  data() {
    return {
      txtstr: this.bottleno,
    };
  },
  watch: {
    bottleno(val) {
      this.txtstr = val;
    }
  },
  computed: {},
  methods: {
    getVal() {
      return this.txtstr;
    },
    iconclick() {
      this.txtstr = "";
    },
    chooseAllCode() {
      this.$refs.refbottleno.focus();
    },
    acceptCode() {
      this.$emit("acceptCode", this.txtstr);
    }
  },
  mounted() { },
  destroyed() { },
};
</script>
<style scoped>
.pwdcls {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
  height: 100%;
  width: calc(100% - 30px);
}
</style>
